<template>
  <div class="bigBox">
    <!-- 顶部统计卡片 -->
    <div class="dashboard-header">
      <div class="header-top">
        <h2 class="dashboard-title">入库统计</h2>
      </div>
      <div class="stats-cards">
        <div class="stat-card card-0">
          <div class="stat-icon">
            <i class="el-icon-document"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ finishedBills }}</div>
            <div class="stat-label">已完成单据数量</div>
          </div>
        </div>
        <div class="stat-card card-1">
          <div class="stat-icon">
            <i class="el-icon-close-notification"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ nofinishedSku }}</div>
            <div class="stat-label">未完成商品数量</div>
          </div>
        </div>
        <div class="stat-card card-2">
          <div class="stat-icon">
            <i class="el-icon-check"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ finishedSku }}</div>
            <div class="stat-label">已完成商品数量</div>
          </div>
        </div>
        <div class="stat-card card-3">
          <div class="stat-icon">
            <i class="el-icon-document-remove"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ nofinishedBills }}</div>
            <div class="stat-label">未完成单据数量</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 查询条件部分 -->
    <div class="topBox">
      <div class="leftBox">
        <div class="title">
          <div class="blueLine">
            入库时间
          </div>
        </div>
        <div class="right">
          <el-date-picker clearable v-model="timeList" type="datetimerange" range-separator="~"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                          @change="getTotal">
          </el-date-picker>
        </div>
      </div>
      <div class="leftBox">
        <div class="title">
          <div class="blueLine">
            仓库
          </div>
        </div>
        <div class="right">
          <el-select v-model="formList.stoId " placeholder="请选择仓库" clearable :style="{ width: '100%' }"
                     filterable @change="getWareHouse">
            <el-option v-for="item in warehousesList" :key="item.stoId" :label="item.stoName"
                       :value="item.stoId"/>
          </el-select>
        </div>
      </div>
      <div class="leftBox">
        <div class="title">
          <div class="blueLine">
            单据号
          </div>
        </div>
        <div class="right">
          <el-input v-model="formList.billsId" placeholder="请输入单据号" clearable style="width: 100%"></el-input>
        </div>
      </div>
      <div class="leftBox">
        <div class="title">
          <div class="blueLine">
            操作人
          </div>
        </div>
        <div class="right">
          <el-input v-model="formList.userName" placeholder="请输入操作人" clearable style="width: 100%"></el-input>
        </div>
      </div>
      <div class="leftBox">
        <div class="title">
          <div class="blueLine">
            生产厂家
          </div>
        </div>
        <div class="right">
          <el-input v-model="formList.billsCd" placeholder="请输入生产厂家" clearable style="width: 100%"></el-input>
        </div>
      </div>
      <div class="leftBox">
        <div class="title">
          <div class="blueLine">
            操作
          </div>
        </div>
        <div class="right" style="display: flex;justify-content: center">
          <el-button type="primary" icon="el-icon-search" @click="getTotal">查询</el-button>
          <el-button @click="exportExcel" type="primary" icon="el-icon-download">导出excel</el-button>
          <el-button @click="resetQuery" type="danger" icon="el-icon-refresh">重置</el-button>
        </div>
      </div>
    </div>

    <!-- 其余部分保持不变 -->
    <el-row>
      <el-col :span="12">
        <div class="areaChart" style="margin-right: 15px;">
          <AreaChart :echartsData="echartsData"/>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="areaChart">
          <top10Echarts :echarts10Data="echarts10Data"/>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="areaChart">
          <el-tabs v-model="activeName">
            <el-tab-pane label="已完成单据" name="first">
              <BuyTable :tableList="tableList" v-loading="loading" element-loading-text="拼命加载中"/>
            </el-tab-pane>
            <el-tab-pane label="未完成单据" name="second">
              <billsNoFinsh :tableList="NofinishList"/>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  queryInBillsList,//获取单据列表
  queryWarehouseList,//获取仓库列表
  queryInChartInfo,//顶部+echarts
} from "@/api/report/yxl.js";
import BuyTable from './other/buyTable.vue'
import AreaChart from './other/areaChartA.vue'
import top10Echarts from './other/top10.vue'
import billsNoFinsh from './other/billsNoFinsh.vue'
import MaterialOutTable from "@/views/report/arriveList/other/MaterialOutTable.vue";

export default {
  name: 'BuyOrder',
  components: {
    MaterialOutTable,
    AreaChart,
    BuyTable,
    top10Echarts,
    billsNoFinsh
  },
  data() {
    return {
      formList: {
        billsCd: '',//生产厂家
        stoId: '',//仓库
        userName: '',//操作人
        billsId: '',//单据号
      },
      loading:true,
      timeList: [this.getDefaultStartDate(), this.getDefaultEndDate()], //时间合计
      warehousesList: [],
      echartsData: [], //折线数据
      tableList: [],
      echarts10Data: [],
      activeName: 'first',//默认显示已完成单据
      finishedBills:0,//已完成单据数量
      finishedSku:0,//已完成商品数量
      nofinishedBills:0,//未完成单据数量
      nofinishedSku:0,//未完成商品数量
      NofinishList:[],//未完成单据列表
    }
  },
  created() {
    this.getData();//获取仓库下拉
    this.getTotal();//获取列表数据
    this.getTopData();//获取顶部数据
  },
  methods: {
    //顶部输出
    getTopData(){
      queryInChartInfo().then(response=>{
        this.finishedBills = response.data.top[0].finishedBills;
        this.nofinishedBills = response.data.top[0].nofinishedBills;
        this.finishedSku = response.data.top[0].finishedSku;
        this.nofinishedSku = response.data.top[0].nofinishedSku;
        this.echarts10Data = response.data.inSkuNumber;//12天入库数量前十的商品
        this.echartsData = response.data.inWarehouseNum;//近12天每天入库数量
      })
    },
    //导出excel
    exportExcel(){
      let params = {
        ...this.formList
      }
      this.download('yxl/billReport/exportInBillsList', {
        ...params
      }, `入库单据.xlsx`)
    },
    //重置
    resetQuery() {
      this.formList = {
        billsCd: '',//生产厂家
        stoId: '',//仓库
        userName: '',//操作人
        billsId: '',//单据号
      }
      this.timeList = [this.getDefaultStartDate(), this.getDefaultEndDate()];//时间合计
      this.getTotal();
    },
    //初始化基础数据
    getData() {
      queryWarehouseList().then(res => {
        this.warehousesList = res.data
      }).catch(error => {
        this.$message.error('获取仓库数据失败:', error);
      });
    },
    //获取日期
    getDefaultStartDate() {
      const date = new Date()
      date.setMonth(date.getMonth() - 1)
      return this.formatDate(date)
    },
    getDefaultEndDate() {
      return this.formatDate(new Date())
    },
    //格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    //切换仓库
    getWareHouse(val) {
      this.formList.stoId = val;
      this.getTotal();
    },
    //入库统计
    getTotal() {
      if (this.timeList && this.timeList[0]) {
        this.formList.startDate = this.timeList[0];
      } else {
        delete this.formList.startDate; // 如果时间为空，则删除该字段
      }
      if (this.timeList && this.timeList[1]) {
        this.formList.endDate = this.timeList[1];
      } else {
        delete this.formList.endDate; // 如果时间为空，则删除该字段
      }
      let param = {
        ...this.formList
      }
      queryInBillsList(param).then(res => {
        // 检查接口返回数据的结构
        if (res.data) {
          this.tableList = res.data.type1;
          this.NofinishList = res.data.type2;
          this.loading = false;
        }
      }).catch(error => {
        this.$message.error('获取入库统计数据失败:', error);
      });
    }
  },
}
</script>

<style scoped lang="scss">
/* 新增的卡片样式 */
.dashboard-header {
  margin-bottom: 20px;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.dashboard-title {
  font-size: 22px;
  color: #333;
  font-weight: 500;
  padding-left: 10px;
  border-left: 4px solid #409eff;
  margin-bottom: 0;
  margin-top: 0;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
  }

  &.card-0 {
    border-top: 3px solid #ff6b6b;
    .stat-icon {
      background: rgba(255, 107, 107, 0.1);
      color: #ff6b6b;
    }
  }

  &.card-1 {
    border-top: 3px solid #feca57;
    .stat-icon {
      background: rgba(254, 202, 87, 0.1);
      color: #feca57;
    }
  }

  &.card-2 {
    border-top: 3px solid #1dd1a1;
    .stat-icon {
      background: rgba(29, 209, 161, 0.1);
      color: #1dd1a1;
    }
  }

  &.card-3 {
    border-top: 3px solid #5f27cd;
    .stat-icon {
      background: rgba(95, 39, 205, 0.1);
      color: #5f27cd;
    }
  }
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

/* 原有样式 */
.topBox {
  flex-wrap: wrap;
  display: flex;
  gap: 0 15px;
}

//曲线图
.areaChart {
  border: 1px solid #e1e1e1;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
}

.blueLine {
  display: flex;
  align-items: center;
}

//下拉菜单
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.blueLine:before {
  content: "";
  background: #8cc5ff;
  display: block;
  width: 6px;
  height: 20px;
  margin-right: 10px;
}

.leftBox:nth-child(2n) .right {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.imgBox {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  background-color: #eef7ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.leftBox {
  margin-bottom: 10px;
  padding: 0 10px;
  width: calc(25% - 12px);
  border-radius: 10px;
  min-height: 110px;
  border: 1px solid #e1e1e1;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;

  .title {
    justify-content: space-between;
    display: flex;
    align-items: center;
    color: #333333;
    font-weight: bold;
    padding: 10px 0px;
    font-size: 18px;
  }

  .right {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-size: 30px;
    color: #409EFF;
    font-weight: bold;
  }
}

.el-row {
  margin-top: 10px;
}

@media (max-width: 1200px) {
  .leftBox {
    width: calc(25% - 8px);
    /* 每行4个卡片 */
  }
}

@media (max-width: 768px) {
  .leftBox {
    width: calc(50% - 8px);
    /* 每行2个卡片 */
  }
}

@media (max-width: 480px) {
  .leftBox {
    width: 100%;
    /* 每行1个卡片 */
  }
}
</style>
